<script setup lang="ts">
import type {PageOrderRespVO} from "@/interfaces/museum";
import {ref} from "vue";
import type {Operation} from "@/interfaces/user";
import {useUpdateOrderStatusApi} from "@/services/api";
import moment from "moment";

interface Props {
  list: PageOrderRespVO[]
}

interface Emits {
  (e: 'update'): void
}
const {list} = defineProps<Props>()
const emits = defineEmits<Emits>()
const show = ref<boolean>(false)
const orderId = ref<string>('')
const statusList = ref<string[]>(['全部', '已预约', '已完成', '已取消'])
const actionList = ref<Operation[]>([
  {
    name: '完成',
    operation: async (id: string) => {
      await useUpdateOrderStatusApi({id, status: 2})
      emits('update')
    },
    disabled: false
  },
  {
    name: '取消',
    operation: async (id: string) => {
      await useUpdateOrderStatusApi({id, status: 3})
      emits('update')
    },
    disabled: false
  }
])
const onClick = (order: PageOrderRespVO) => {
  if (order.status == 3 || order.status == 2) {
    return
  }
  if (moment(order.orderDate).isBefore(moment())) {
    actionList.value[0].disabled = false
    actionList.value[1].disabled = true
  } else {
    actionList.value[0].disabled = true
    actionList.value[1].disabled = false
  }
  orderId.value = order.id
  show.value = true
}
const selectAction = async (index: Operation) => {
  index.operation(orderId.value)

}
</script>

<template>
  <view class="container">
    <view v-for="(order,index) in list"
          :key="index"
          class="order-card"
          @tap="onClick(order)"
    >
      <view class="order-id">预约号：{{ order.id }}</view>
      <view class="order-museum">博物馆：{{ order.museumName }}</view>
      <view class="order-date">预约日期：{{ order.orderDate }}</view>
      <view class="order-create">预约时间：{{ order.createDate }}</view>
      <view class="order-status">状态：{{ statusList[order.status] }}</view>
  </view>
    <u-action-sheet :actions="actionList" :closeOnClickAction="true" :closeOnClickOverlay="true" :show="show"
                    title="操作" @close="show = false" @select="selectAction"></u-action-sheet>
</view>
</template>

<style scoped lang="scss">
.container {
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;

  .order-card {
    width: 100%;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;

    .order-id {
      font-size: 16px;
      font-weight: 600;
      color: #f0ad4e;
    }

    .order-museum, .order-date, .order-create, .order-status {
      padding-left: 6px;
    }

    .order-status {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}

</style>